<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        :表示的是伪类
              ::表示的是伪对象（伪元素）
              ::selection 注意 ::不能省 被用户选中之后的高亮部分，background color

              ::after 必须要和content一起用，表示在对象后添加内容
              ::before 必须要和content一起用，表示在对象前添加内容

              ::first-letter 第一个字
              ::first-line 第一行
     -->
     <link rel="stylesheet" href="style.css">
     <style>
         /* .box::after{
             content: "";
             color: red;
             font-size: 20px;
             width:0; height:0;
             display: block;
             border: solid 5px transparent;
             border-top: solid 5px red;
             margin: 50px;
         }
         .box::before{
             content: "";
             color: red;
             font-size: 20px;
             width:0; height:0;
             display: block;
             border: solid 5px transparent;
             border-bottom: solid 5px red;
             margin: 50px;


             transparent 透明 
         } */
         /* .box{
            width:0; height:0;
            border-left:solid 15px #fff;
            border-right:solid 15px #fff;
            border-top:solid 15px blue;
            border-bottom:solid 15px #fff;
            margin: 50px;
         } */
        .box::first-line{
            color: red;
            font-size: 20px;
        }
     </style>
</head>
<body>
   <div class="box">
      通知，明天上课<br />上晚自习
   </div> 
  
</body>
</html>